<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>升学</title>
    <script src="../echarts/echarts.min.js"></script>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="sub" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('main'));
            var myChart2 = echarts.init(document.getElementById('sub'));
            //数据加载完之前先显示一段简单的loading动画
            myChart1.showLoading();
            myChart2.showLoading();
            $.ajax({
                url: "../echarts/encrolment",    //请求发送到TestServlet处
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var data = result.data;
                    var typename = ['type','参考人数','重点人数','本科人数','专科人数'];
                    var infos = [];
                    var years = [];
                    var keynums = []; //重点上线率
                    var regulars = [];//本科上线率
                    var juniors = [];//专科上线率
                    var disqualifies = [];//未上线率
                    let seriesArr = [{type: 'bar'},{type: 'bar'},{type: 'bar'},{type: 'bar'}];
                    for (const encrolment of data.reverse()) {
                        let totalNum = encrolment.disqualifyNum+encrolment.juniorNum+encrolment.regularNum+encrolment.keyNum;
                        let info = {
                            type:encrolment.enrolmentYear,'参考人数':totalNum,'重点人数':encrolment.keyNum,'本科人数':encrolment.regularNum,'专科人数':encrolment.juniorNum,
                        }
                        keynums.push((encrolment.keyNum/totalNum*100).toFixed(2));
                        regulars.push((encrolment.regularNum/totalNum*100).toFixed(2));
                        juniors.push((encrolment.juniorNum/totalNum*100).toFixed(2));
                        disqualifies.push((encrolment.disqualifyNum/totalNum*100).toFixed(2));
                        infos.push(info);
                        years.push(encrolment.enrolmentYear);
                    }
                    console.log(infos);
                    myChart1.hideLoading();    //隐藏加载动画
                    myChart2.hideLoading();
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    myChart1.setOption({
                        title:{
                            text:'近5年升学人数'
                        },
                        legend: {},
                        tooltip: {},
                        dataset: {
                            dimensions: typename,
                            source: infos
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: seriesArr
                    });
                    myChart2.setOption({
                        title:{
                            text:'近5年升学率'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['重点','本科','专科','未上线']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: years
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [

                            {
                                name: '重点',
                                type: 'bar',
                                stack: '类型',
                                data: keynums
                            },
                            {
                                name: '本科',
                                type: 'bar',
                                stack: '类型',
                                data: regulars
                            },
                            {
                                name: '专科',
                                type: 'bar',
                                stack: '类型',
                                data: juniors
                            },
                            {
                                name: '未上线',
                                type: 'bar',
                                stack: '类型',
                                data: disqualifies
                            },

                        ]
                    })
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart1.hideLoading();
                }
            })

        })
    </script>
</body>
</html>